<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>chatroom-react</title>
	<script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/browser.min.js"></script>
    <style>
		body {
			font-size: 12px;
			font-family: 'microsoft yahei';
			background: #212121;
		}
		#container {
			width: 500px;
			/*border: 1px solid #ccc;*/
			/*box-shadow: 3px 2px 0px rgba(0,0,0,.1);*/
			background: #FFF9C4;
			/*padding: 10px;*/
		}

		#msgbox {
			height: 400px;
			/*border: 1px solid #bbb;*/
			overflow-y: auto;
			/*overflow-y: scroll;*/
			overflow-x: hidden;
		}

		#postbar {
			margin-top: 10px;
			background: #0288D1;
			height: 40px;
			line-height: 40px;
		}

		.msgitem {
			margin: 10px;
		}

		.msgitem:after {
			content: '';
			visibility: hidden;
			display: block;
			clear: both;
		}

		.msgitem-left {
			text-align: left;
		}
		.msgitem-right {
			text-align: right;
		}
		
		.avatar {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			/*border: 2px solid #ddd;*/
			/*display: inline-block;*/
			/*vertical-align: top;*/
		}
		.avatar img {
			width: 100%;
			border-radius: 50%;
			height: 100%;
		}
		.msg-info {
			/*display: inline-block;*/
			min-height: 40px;
			/*line-height: 50px;*/
			vertical-align: top;
			width: 300px;
			background: #448AFF;
			border-radius: 20px;
			text-align: left;
			padding: 5px 20px 5px 20px;
			font-weight: bold;
			color: #fff;
			font-size: 15px;
		}

		.msg-info-right,.avatar-right {
			float: right;
		}
		.msg-info-left,.avatar-left {
			float: left;
		}
		.msg-info-left {
			background: #fff;
			border: 1px solid #ccc;
			color: #0288D1;
			margin-left: 2px;
		}

		#postbar {
			padding: 2px
		}
		#inputmsg {
			width: 80%;
			border-radius: 5px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #ccc;
			padding:0 1px 0 1px;
		}
		#btnpost{
			width: 18%;
			height: 30px;
			border: 1px solid #ccc;
			border-radius: 5px;
			background: #efefef;
			cursor: pointer;
			margin-left: 2px;
		}
	</style>
</head>
<body>
	<div id="container">
	</div>

	<script type="text/babel">
		var MessageItem = React.createClass({
			handleHover: function(event) {
				console.log("MessageItem handleHover", event);
				if(this.props.hoverHandler) {
					this.props.hoverHandler(event);
				}
			},
			render: function() {
				var align = this.props.align;
				var cls = "msg-info msg-info-" + align;
				var cls2 = "avatar avatar-" + align;
				var cls3 = "msgitem msgitem-" + align;
				return (<div className={cls3} >
							<div className={cls2}>
								<img src={this.props.avatar} alt="" onMouseOver={this.handleHover}/>
							</div>
							<div className={cls}>{this.props.msg}</div>
						</div>
				);
			}
		});

		var AI_Msgs = [
			{ ask: "你多大？", ans: "你猜！" },
			{ ask: "大", ans: "大什么大？" },
			{ ask: "陈志", ans: ".net 高手" },
			{ ask: "齐永胜", ans: "java 大牛" },
			{ ask: "alpha go", ans: "我的同类" },
			{ ask: "高佳", ans: "大肚婆^_^" },
			{ ask:"赵伟", ans:"abap 高手 高手 高高手。。。。" }
		];

		var MessageBox = React.createClass({
			getInitialState: function() {
				return {
					msgs: [
						{ align: "left", msg: "请说出你的问题！", avatar: "../ai.jpg" }
					]
				};
			},
			componentDidUpdate: function() {
				var msgboxObj = this.refs.msgbox;
				var h = msgboxObj.clientHeight;
				var sh = msgboxObj.scrollHeight;
				var offset = sh - h;
				// console.log("height = %s, scrollHeight = %s",h,sh);
				msgboxObj.scrollTop = offset + 30;
				this.refs.inputmsg.value = "";
			},
			handelClick: function(event) {
				var msg = this.refs.inputmsg.value;
				var msgs = this.state.msgs;
				var isAI = msgs.length % 2 == 0;
				var align = "right";
				msgs.push({ align: align, msg: msg, avatar: "../my.gif" });
				this.setState({msgs: msgs});
				var ans = { align: "left", msg: "...", avatar: "../ai.jpg" }
				
				if(msg.length == 0) {
					ans.msg = "什么也没说？";
				}else{
					ans.msg = ".....";
					var sortObj = [];
					for(var i = 0; i < AI_Msgs.length; i++){
						var item = AI_Msgs[i];
						if(item.ask.indexOf(msg) >= 0) {
					 		sortObj.push({ans:item.ans, index: item.ask.indexOf(msg)});
					 	}
					}
					sortObj.sort(function(item1,item2){
						return item1.index > item2.index;
					});
					if(sortObj.length > 0) {
						ans.msg = sortObj[0].ans;
					}

				}
				this.timer = setTimeout(function() {
					// console.log(ans);
					msgs.push(ans);
					this.setState({msgs: msgs});
				}.bind(this), 500);
			},
			handleHover: function(event) {
				console.log("hover", event);
			},
			render: function() {
				var hoverHandler = this.handleHover;
				return (
					<div>
						<div id="msgbox" ref="msgbox">
						{
							this.state.msgs.map(function(item, index) {
								return (<MessageItem key={index} align={item.align} msg={item.msg} avatar={item.avatar} hoverHandler={hoverHandler} />);
							}.bind(this))
						}
						</div>
						<div id="postbar">
							<input type="text" id="inputmsg" ref="inputmsg" />
							<input type="button" id="btnpost" value="发送" onClick={this.handelClick} />
						</div>
					</div>
				);
			}
		});

		ReactDOM.render(
			<MessageBox />,
			document.querySelector("#container")
		);
	</script>
</body>
</html>